<template>
  <!-- 报表-机票出票报表 -->
  <div class="outticket-report">
    <el-card shadow="never">
      <el-form
        ref="queryForm"
        :model="formItem"
        label-width="90px"
        class="queryForm clearfix"
      >
        <el-col :span="6" v-for="(item, index) in queryParam" :key="index">
          <el-form-item :label="item.title">
            <date-picker
              ref="datepickers"
              v-if="item.type === 'DateGroup'"
              :empty="!item.defaultValue"
              @change-date="(type, val) => changeDate(type, val, item.name)"
            >
            </date-picker>
            
            <el-select
              v-else-if="item.type === 'List'"
              v-model="formItem.data[item.name]"
              style="width: 100%"
            >
              <el-option
                v-for="(item, key) in item.dataSource"
                :key="key"
                :label="item"
                :value="key"
              ></el-option>
            </el-select>

            <el-input
              v-else-if="item.type === 'Text'"
              v-model.trim="formItem.data[item.name]"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="btnBox">
            <el-button type="primary" @click="handleSubmit">查询</el-button>
            <el-button class="btnColor1" type="danger" @click="resetForm"
              >清空查询条件</el-button
            >
            <el-button class="btnColor2" @click="exportBtn"
              >导出Excel</el-button
            >
          </div>
        </el-col>
      </el-form>
    </el-card>
    <el-card shadow="never" style="margin-top: 15px">
      <slot :tableData="{outOrderData,outOrderDataCol}"></slot>
      <Paging
        ref="paging"
        :total="total"
        :pageSize="formItem.pageSize"
        @page-change="pageChange"
      ></Paging>
    </el-card>
  </div>
</template>

<script>
import {Card,Button,Form,FormItem,Select,Input,Col,Option} from 'element-ui';
import moment from 'moment';
import Paging from './components/paging';
import DatePicker from './components/date-picker';

export default {
  name:'ReportForm',
  components: {
    Paging,
    DatePicker,
    [Card.name]:Card,
    [Button.name]:Button,
    [Form.name]:Form,
    [FormItem.name]:FormItem,
    [Select.name]:Select,
    [Input.name]:Input,
    [Col.name]:Col,
    [Option.name]:Option,
  },
  props:{
    oriQueryParam:{
      type:Array,
      default:()=>[]
    },
    orderRes:{
      type:Object,
      default:null,
    },
    exportRes:null,
  },
  data() {
    return {
      queryParam:JSON.parse(JSON.stringify(this.oriQueryParam)),
      // 日期的默认查询时间(月初到当前时间)
      selData: {
        selDateStart: moment().format('YYYY-MM-01'),
        selDateEnd: moment().format('YYYY-MM-DD'),
      },
      formItem: {
        pageNo: 1,
        pageSize: 10,
        data: {},
      },
      oriFormItem:{},
      outOrderDataCol:[],
      outOrderData:[],
      total:0
    };
  },
  watch:{
    oriQueryParam(val){
      this.queryParam=JSON.parse(JSON.stringify(val));
      this.initForm(val)
    },
    orderRes(res){
      this.outOrderDataCol = Object.keys(res.headers).map(key=>{
        return {prop: key,label:res.headers[key]}
      })
      if(res.success){
        this.outOrderData = res.rows;
        this.total = res.total;
      }      
    },
    exportRes(res){
      if (res) {
        const url = window.URL.createObjectURL(new Blob([res], { type: 'application/vnd.ms-excel' })); // xls格式
        const link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', '报表');
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    }
  },
  methods: {
    // 日期组件值改变事件 type 0 start 1 end
    changeDate(type, val, key) {
      // 开始日期
      if(type){
        this.formItem.data[key+'End']=val
      }else{
        this.formItem.data[key+'Begin']=val
      }
    },
    // 条件查询
    handleSubmit() {
      this.formItem.pageNo = 1;
      this.$refs.paging.currentPage = 1;
      this.getOrderData();
    },
    // 分页查询
    pageChange(pageNum) {
      this.formItem.pageNo = pageNum;
      this.getOrderData();
    },
    async getOrderData() {
      this.$emit('getdata',this.formItem)
    },
    // 清空查询条件
    resetForm() {
      this.$refs.datepickers.map(com=>{
        com.reset()
      })
      this.formItem=JSON.parse(JSON.stringify(this.oriFormItem))
    },
    // 导出
    async exportBtn() {
      this.$emit('exportreport',this.formItem.data);
    },
    initForm(params){
      params.map(item=>{
        if(item.type==='DateGroup'){
          if(item.defaultValue){
            this.$set(this.formItem.data,item.name+'End',this.selData.selDateEnd)
            this.$set(this.formItem.data,item.name+'Begin',item.defaultValue)
          } else {
            this.$set(this.formItem.data,item.name+'End','')
            this.$set(this.formItem.data,item.name+'Begin','')
          }
        }else{
          const val = item.defaultValue || ''
          this.$set(this.formItem.data,item.name,val)
        }
      });
      this.oriFormItem = JSON.parse(JSON.stringify(this.formItem))
      this.getOrderData();
    }
  },
};
</script>

<style>
.queryForm .el-date-editor .el-input__inner {
  padding: 0 5px;
}
.queryForm .el-date-editor .el-input__prefix {
  display: none;
}
.queryForm .shortLine {
  text-align: center;
  line-height: 40px;
}
.btnBox {
  position: relative;
  text-align: center;
  margin: 10px 0 20px 0;
}
</style>
